<template>
	<view class="container">
		<view class="tui-order-header">
			<!-- <image :src="webURL+'img_detail_bg.png'" mode="widthFix" class="tui-img-bg"></image> -->
			<view class="tui-header-content">
				<view>
					<view class="tui-status-text">{{getStatusText(status)}}</view>
					<view class="tui-reason"><text class="tui-reason-text">{{getReason(status)}}</text>
						<tui-countdown v-if="data.status==0" :time="time" color="rgba(254,254,254,0.75)" colonColor="rgba(254,254,254,0.75)"
						 borderColor="transparent" backgroundColor="transparent"></tui-countdown>
					</view>
				</view>
				<image :src="getImg(status)" class="tui-status-img" mode="widthFix"></image>
			</view>
		</view>
		<tui-list-cell arrow backgroundColor="#fefefe" @click="logistics" v-if="data.status!=0">
			<view class="tui-flex-box">
				<image :src="webURL+'img_order_logistics3x.png'" class="tui-icon-img"></image>
				<view class="tui-logistics">
					<view class="tui-logistics-text">{{getStatusText(status)}}</view>
<!-- 					<view class="tui-logistics-time">2019-06-03 12:02</view> -->
				</view>
			</view>
		</tui-list-cell>
		<tui-list-cell unlined :hover="false">
			<view class="tui-flex-box">
				<image :src="webURL+'img_order_address3x.png'" class="tui-icon-img"></image>
				<view class="tui-addr">
					<view class="tui-addr-userinfo">{{data.receiverName}}<text class="tui-addr-tel">{{data.receiverPhone}}</text></view>
					<view class="tui-addr-text">{{data.receiverProvince}}{{data.receiverCity}}{{data.receiverRegion}}{{data.receiverDetailAddress}}</view>
				</view>
			</view>
		</tui-list-cell>

		<view class="tui-order-item">
			<tui-list-cell :hover="false" :lineLeft="false">
				<view class="tui-goods-title">
					商品信息
				</view>
			</tui-list-cell>
			<block v-for="(item,index) in data.orderItemList" :key="index">
				<tui-list-cell padding="0">
					<view class="tui-goods-item" >
						<image :src="item.productPic" class="tui-goods-img"  @click="detail(item.productId)"></image>
						<view class="tui-goods-center">
							<view class="tui-goods-name">{{item.productName}}</view>
							<view class="tui-goods-attr">{{item.productAttr|productAttrJSON}}</view>
							<view class="tui-btn-mr" v-if="evaluate&&!item.commentTime!=null&&!item.commentTime!=''">
								<tui-button type="black" :plain="true" width="120rpx" height="45rpx" :size="22" shape="circle" @click="toEvaluate(item.productId)">商品评价</tui-button>
							</view>
						</view>
						<view class="tui-price-right">
							<view>￥{{item.pmsSkuStock.price}}</view>
							<view>x{{item.productQuantity}}</view>
						</view>
						
					</view>
					
				</tui-list-cell>
			</block>
			<view class="tui-goods-info">
				<view class="tui-price-flex tui-size24">
					<view>商品总额</view>
					<view>￥{{data.totalAmount}}</view>
				</view>
				<!-- 	<view class="tui-price-flex  tui-size24">
					<view>优惠券</view>
					<view>￥0.00</view>
				</view> -->
				<view class="tui-price-flex  tui-size24">
					<view>配送费</view>
					<view>￥0.00</view>
				</view>
				<view class="tui-price-flex tui-size32">
					<view class="tui-flex-shrink">实付款</view>
					<view class="tui-goods-price tui-primary-color">
						<view class="tui-size-24">￥</view>
						<view class="tui-price-large">{{data.payAmount}}</view>
						<!-- <view class="tui-size-24">.00</view> -->
					</view>
				</view>
			</view>
		</view>

		<view class="tui-order-info">
			<tui-list-cell :hover="false">
				<view class="tui-order-title">
					订单信息
				</view>
			</tui-list-cell>
			<view class="tui-order-content">
				<view class="tui-order-flex">
					<view class="tui-item-title">订单号:</view>
					<view class="tui-item-content">{{data.orderSn}}</view>
				</view>
				<!-- <view class="tui-order-flex">
					<view class="tui-item-title">物流单号:</view>
					<view class="tui-item-content">33655511251265578556</view>
				</view> -->
				<view class="tui-order-flex">
					<view class="tui-item-title">创建时间:</view>
					<view class="tui-item-content">{{data.newCreateTime}}</view>
				</view>
				<!-- 	<view class="tui-order-flex">
					<view class="tui-item-title">付款时间:</view>
					<view class="tui-item-content">2019-05-26 10:44</view>
				</view> -->
				<!-- <view class="tui-order-flex">
					<view class="tui-item-title">发货时间:</view>
					<view class="tui-item-content">2019-05-27 10:20</view>
				</view> -->
				<view class="tui-order-flex">
					<view class="tui-item-title">配送方式:</view>
					<view class="tui-item-content">包邮</view>
				</view>
				<view class="tui-order-flex">
					<view class="tui-item-title">订单备注:</view>
					<view class="tui-item-content">{{data.note}}</view>
				</view>
			</view>
		</view>
		<view class="tui-safe-area"></view>
		<view class="tui-tabbar tui-order-btn" v-if="data.status==0">
			<view class="tui-btn-mr">
				<tui-button type="black" :plain="true" width="152rpx" height="56rpx" :size="26" shape="circle" @click="cancel()">取消订单</tui-button>
			</view>
			<view class="tui-btn-mr">
				<tui-button type="danger" :plain="true" width="152rpx" height="56rpx" :size="26" shape="circle" @click="pay()">立即支付</tui-button>
			</view>
		</view>
		<view class="tui-tabbar tui-order-btn" v-if="data.status==1">
			<view class="tui-btn-mr">
				<tui-button type="black" :plain="true" width="152rpx" height="56rpx" :size="26" shape="circle" @click="orderRefund()">取消订单</tui-button>
			</view>
		</view>
		<view class="tui-tabbar tui-order-btn" v-if="data.status==2">
			<view class="tui-btn-mr">
				<tui-button type="black" :plain="true" width="152rpx" height="56rpx" :size="26" shape="circle" @click="success()">确认收货</tui-button>
			</view>
		</view>
		<view class="tui-tabbar tui-order-btn" v-if="data.status==3">
			<view class="tui-btn-mr">
				<tui-button type="black" :plain="true" width="152rpx" height="56rpx" :size="26" shape="circle" @click="del()">删除订单</tui-button>
			</view>
			
		</view>
		<view class="tui-tabbar tui-order-btn" v-if="data.status==4">
			<view class="tui-btn-mr">
				<tui-button type="black" :plain="true" width="152rpx" height="56rpx" :size="26" shape="circle" @click="del()">删除订单</tui-button>
			</view>
		</view>

		<!-- 模态框 -->
		<u-modal v-model="del_show" content="是否删除商品？" :show-cancel-button="true" @confirm="delConfirm()"></u-modal>
		<u-modal v-model="cancel_show" content="是否取消商品？" :show-cancel-button="true" @confirm="cancelConfirm()"></u-modal>
		<u-modal v-model="successl_show" content="是否收货成功？" :show-cancel-button="true" @confirm="successConfirm()"></u-modal>
		<u-modal v-model="orderRefund_show" content="是否取消订单？" :show-cancel-button="true" @confirm="orderRefundConfirm()"></u-modal>
		<!-- 提示框 -->
		<tui-toast ref="toast"></tui-toast>
		
		<u-no-network tips="哎呀，网络信号丢失"></u-no-network>
		
		<failTimeout v-show="failTimeout"></failTimeout>
	</view>
</template>

<script>
	import OmsPortalOrderController from '../../api/OmsPortalOrderController.js'
	import PmsPortalCommentController from '../../api/PmsPortalCommentController.js'
	
	import {
		formatDate
	} from '../../utils/date.js'
	export default {
		data() {
			return {
				failTimeout:false,
				webURL: "https://www.thorui.cn/wx/static/images/mall/order/",
				//0-待付款 1-付款成功 2-待收货 3-订单已完成 4-交易关闭
				status: 1,
				orderId: null,
				data: {},
				time: 0,
				del_show: false,
				cancel_show:false,
				successl_show:false,
				evaluate:false,
				orderRefund_show:false,
			}
		},
		onLoad(o) {
			this.orderId = o.orderId
			if (this.orderId == null || this.orderId == '' || this.orderId == 'undefined') {
				uni.navigateBack()
			}
			
			
		},
		async onShow() {
			await this.rendering()
			
		},
		filters:{
			productAttrJSON(value){
				console.log(JSON.parse(value))
			}
		},
		methods: {
			async rendering(){
				await OmsPortalOrderController.detail(this.orderId).then(res => {
					if (res.data.code == 200) {
						this.time = (new Date(res.data.data.createTime).getTime() + 2 * 60 * 60 * 1000 - new Date().getTime()) / 1000
						res.data.data.newCreateTime = formatDate(new Date(res.data.data.createTime), 'yyyy-MM-dd hh:mm:ss')
						this.data = res.data.data
						this.status = res.data.data.status
						
					}
				}).catch(err => {
					if(err.errMsg=='request:fail timeout'){
						this.failTimeout=true
					}
				})
				if(this.status==3){
					console.log(11)
					this.queryEvaluate()
				}
			},
			getImg: function(status) {
				return this.webURL + ["img_order_payment3x.png", "img_order_send3x.png", "img_order_received3x.png",
					"img_order_signed3x.png", "img_order_closed3x.png"
				][status]
			},
			getStatusText: function(status) {
				return ["等待您付款", "付款成功", "待收货", "订单已完成", "交易关闭"][status]
			},
			getReason: function(status) {
				return ["剩余时间", "等待卖家发货", "请确认商品是否完好", "欢迎下次购买", "未付款，订单已取消"][status]
			},
			logistics() {
				uni.navigateTo({
					url: '/pages/order/express?orderId='+this.orderId
				})
			},
			del() {	//删除
				this.del_show = true;
			},
			delConfirm() {		//确认删除
				OmsPortalOrderController.deleteOrder(this.data.id).then(res => {
					if (res.data.code == 200) {
						this.$refs.toast.show({
							title: "删除成功",
							imgUrl: "/static/img/toast/check-circle.png",
							icon: true
						})
						let pages = getCurrentPages(); // 当前页面
						let beforePage = pages[pages.length - 2]; // 前一个页面
						beforePage.$vm.refresh(); // 执行前一个页面的方法
						setTimeout(() => {
							uni.navigateBack();
						}, 2000)
					}
				}).catch(err => {
					console.log(err)
				})
			},
			cancel(){		//取消
				this.cancel_show=true;
			},
			cancelConfirm(){		//确认取消
				OmsPortalOrderController.cancelUserOrder(this.data.id).then(res => {
					if (res.data.code == 200) {
						this.$refs.toast.show({
							title: "取消成功",
							imgUrl: "/static/img/toast/check-circle.png",
							icon: true
						})
						let pages = getCurrentPages(); // 当前页面
						let beforePage = pages[pages.length - 2]; // 前一个页面
						beforePage.$vm.refresh(); // 执行前一个页面的onLoad方法
						setTimeout(() => {
							this.rendering();
						}, 2000)
					}
				}).catch(err => {
					console.log(err)
				})
			},
			orderRefund(){	//付钱后取消订单
				this.orderRefund_show=true;
			},
			async orderRefundConfirm(){
				await OmsPortalOrderController.orderRefund(this.data.id).then(res=>{
					if(res.data.code==200){
						uni.redirectTo({
							url:'/pages/order/order?orderId='+this.orderId
						})
					}
				}).catch(err=>{
					console.log(err)
				})
			},
			pay(){
				uni.navigateTo({
					url:'/pages/pay/pay?orderId='+this.data.id
				})
			},
			success(){		//收货成功
				this.successl_show=true
			},
			successConfirm(){	//确认收货成功
				 OmsPortalOrderController.confirmReceiveOrder(this.data.id).then(res => {
					if (res.data.code == 200) {
						this.$refs.toast.show({
							title: "确认收货",
							imgUrl: "/static/img/toast/check-circle.png",
							icon: true
						})
						let pages = getCurrentPages(); // 当前页面
						let beforePage = pages[pages.length - 2]; // 前一个页面
						beforePage.$vm.refresh(); // 执行前一个页面的onLoad方法
						setTimeout(() => {
							this.rendering();
						}, 2000)
					}
				}).catch(err => {
					console.log(err)
				})
			},
			queryEvaluate(){	//查询该商品是否已经评价
			
			for(let i=0;i<this.data.orderItemList.length;i++){
				PmsPortalCommentController.getByIdAndMenberId(this.data.orderItemList[i].id).then(res => {
					if (res.data.data == null||res.data.data==''||res.data.data=='undefined') {
						this.evaluate=true;
					}else{
						this.evaluate=false;
					}
				}).catch(err => {
					console.log(err)
				})
			}
			},
			toEvaluate(productId){	//跳转商品评价
				if(this.evaluate){
					uni.navigateTo({
						url:'/pages/productEvaluation/productEvaluation?orderId='+this.data.id+"&productId="+productId
					})
				}
			},
			detail(id){
				uni.navigateTo({
					url: '../goodsDetails/goodsDetails?id='+id
				})
			}
		}
	}
</script>

<style>
	.container {
		padding-bottom: 118rpx;
	}

	.tui-order-header {
		width: 100%;
		height: 160rpx;
		position: relative;
		background-color: #EB0909;
	}

	.tui-img-bg {
		width: 100%;
		height: 160rpx;
	}

	.tui-header-content {
		width: 100%;
		height: 160rpx;
		position: absolute;
		z-index: 10;
		left: 0;
		top: 0;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 70rpx;
		box-sizing: border-box;
	}

	.tui-status-text {
		font-size: 34rpx;
		line-height: 34rpx;
		color: #FEFEFE;
	}

	.tui-reason {
		font-size: 24rpx;
		line-height: 24rpx;
		color: rgba(254, 254, 254, 0.75);
		padding-top: 15rpx;
		display: flex;
		align-items: center;
	}

	.tui-reason-text {
		padding-right: 12rpx;
	}

	.tui-status-img {
		width: 80rpx;
		height: 80rpx;
		display: block;
	}

	.tui-flex-box {
		width: 100%;
		display: flex;
		align-items: center;
	}

	.tui-icon-img {
		width: 44rpx;
		height: 44rpx;
		flex-shrink: 0;
	}

	.tui-logistics {
		display: flex;
		flex-direction: column;
		justify-content: center;
		padding: 0 24rpx 0 20rpx;
		box-sizing: border-box;
	}

	.tui-logistics-text {
		font-size: 26rpx;
		line-height: 32rpx;
	}

	.tui-logistics-time {
		font-size: 24rpx;
		line-height: 24rpx;
		padding-top: 16rpx;
		color: #666
	}

	.tui-addr {
		display: flex;
		flex-direction: column;
		justify-content: center;
		padding-left: 20rpx;
		box-sizing: border-box;
	}

	.tui-addr-userinfo {
		font-size: 30rpx;
		line-height: 30rpx;
		font-weight: bold;
	}

	.tui-addr-text {
		font-size: 24rpx;
		line-height: 32rpx;
		padding-top: 16rpx;
	}

	.tui-addr-tel {
		padding-left: 40rpx;
	}

	.tui-order-item {
		margin-top: 20rpx;
		border-radius: 10rpx;
		overflow: hidden;
	}

	.tui-goods-title {
		width: 100%;
		font-size: 28rpx;
		line-height: 28rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}


	.tui-goods-item {
		width: 100%;
		padding: 20rpx 30rpx;
		box-sizing: border-box;
		display: flex;
		justify-content: space-between;
	}

	.tui-goods-img {
		width: 180rpx;
		height: 180rpx;
		display: block;
		flex-shrink: 0;
	}

	.tui-goods-center {
		flex: 1;
		padding: 20rpx 8rpx;
		box-sizing: border-box;
	}

	.tui-goods-name {
		max-width: 310rpx;
		word-break: break-all;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		font-size: 26rpx;
		line-height: 32rpx;
	}

	.tui-goods-attr {
		font-size: 22rpx;
		color: #888888;
		line-height: 32rpx;
		padding-top: 20rpx;
		word-break: break-all;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
	}

	.tui-price-right {
		text-align: right;
		font-size: 24rpx;
		color: #888888;
		line-height: 30rpx;
		padding-top: 20rpx;
	}

	.tui-color-red {
		color: #E41F19;
		padding-right: 30rpx;
	}

	.tui-goods-price {
		width: 100%;
		display: flex;
		align-items: flex-end;
		justify-content: flex-end;
		font-size: 24rpx;
	}

	.tui-size-24 {
		font-size: 24rpx;
		line-height: 24rpx;
	}

	.tui-price-large {
		font-size: 32rpx;
		line-height: 30rpx;
	}

	.tui-goods-info {
		width: 100%;
		padding: 30rpx;
		box-sizing: border-box;
		background: #fff;
	}

	.tui-price-flex {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.tui-size24 {
		padding-bottom: 20rpx;
		font-size: 24rpx;
		line-height: 24rpx;
		color: #888;
	}

	.tui-size32 {
		font-size: 32rpx;
		line-height: 32rpx;
		font-weight: 500;
	}

	.tui-pbtm20 {
		padding-bottom: 20rpx;
	}

	.tui-flex-shrink {
		flex-shrink: 0;
	}

	.tui-primary-color {
		color: #EB0909;
	}

	.tui-order-info {
		margin-top: 20rpx;
	}

	.tui-order-title {
		position: relative;
		font-size: 28rpx;
		line-height: 28rpx;
		padding-left: 12rpx;
		box-sizing: border-box;
	}

	.tui-order-title::before {
		content: '';
		position: absolute;
		left: 0;
		top: 0;
		border-left: 4rpx solid #EB0909;
		height: 100%;
	}

	.tui-order-content {
		width: 100%;
		padding: 24rpx 30rpx;
		box-sizing: border-box;
		background: #fff;
		font-size: 24rpx;
		line-height: 30rpx;
	}

	.tui-order-flex {
		display: flex;
		padding-top: 18rpx;
	}

	.tui-order-flex:first-child {
		padding-top: 0
	}

	.tui-item-title {
		width: 132rpx;
		flex-shrink: 0;
	}

	.tui-item-content {
		color: #666;
		line-height: 32rpx;
	}

	.tui-safe-area {
		height: 1rpx;
		padding-bottom: env(safe-area-inset-bottom);
	}

	.tui-tabbar {
		width: 100%;
		height: 98rpx;
		background: #fff;
		position: fixed;
		left: 0;
		bottom: 0;
		display: flex;
		align-items: center;
		justify-content: flex-end;
		font-size: 26rpx;
		box-shadow: 0 0 1px rgba(0, 0, 0, .3);
		padding-bottom: env(safe-area-inset-bottom);
		z-index: 996;
	}

	.tui-btn-mr {
		margin-right: 30rpx;
	}
</style>
